<template>
  <div class="content-body" :style="borderStyle">
    <el-card style="margin-top: 10px" shadow="never">
      <div v-for="(item,index) in setting.query" :key="'query-li-'+index">
        <div v-if="item.type === 1" class="query-custom">
          <div class="query-body" :class="focus === true ? 'active': ''">
            <input
              v-model="form[item.column]"
              class="query-input"
              autocomplete="off"
              :style="borderStyle"
              placeholder="快速探索 Tsinghua University"
              @focus="userFocusin"
              @blur="userFocusout"
            >
            <span class="query-button" @click="queryEntity"><i class="el-icon-search" /></span>
          </div>
        </div>
        <div v-if="item.type === 6" class="query-item">
          <query-list :key="item.sjx" :sjx="item" @callBack="queryBack" />
        </div>
      </div>
    </el-card>
    <div class="article-body">
      <div v-if="column" class="custom-ul-header">
        <el-row :gutter="5">
          <el-col v-for="(item,index) in column" :key="'label-'+index" :span="item.width">{{ item.label }}</el-col>
        </el-row>
      </div>
      <el-empty v-if="dataList === null || dataList.length === 0" :image-size="100" />
      <div v-else>
        <div
          v-for="(obj,index) in dataList"
          :key="'obj-'+index"
          class="custom-ul-li"
          :style="active === index ? activeStyle: ''"
          @mouseenter="openAlert(index)"
          @mouseleave="closeAlert(index)"
          @click="openEntity(obj)"
        >
          <el-row :gutter="5">
            <el-col v-for="(item,index) in column" :key="'td-'+index" :span="item.width">
              {{ obj[item.column] }}
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="query-pager">
      <el-pagination
        :current-page="form.page"
        :page-size="form.size"
        :total="pagerSize"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
import QueryList from './common/queryList';
import { more, openEntity } from '@/mixins/template';
export default {
  name: 'PcMoreNewListTempV1',
  components: { QueryList },
  mixins: [more, openEntity],
  props: {
    temp: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      column: {},
      setting: {},
      dataList: [],
      pagerSize: 0,
      form: {
        page: 1,
        size: 10,
        cid: null
      },
      customStyle: {},
      titleStyle: {},
      bodyStyle: {},
      active: null,
      activeStyle: { },
      focus: false
    };
  },
  computed: {
    borderStyle() {
      if (this.temp.sfxsbk === true) {
        return { backgroundColor: this.customStyle.mrzt, opacity: this.customStyle.tmd, color: this.customStyle.fontColor };
      }
      if (this.temp.bkyy === true) {
        return { backgroundColor: this.customStyle.mrzt, opacity: this.customStyle.tmd, color: this.customStyle.fontColor };
      }
      return { backgroundColor: this.customStyle.mrzt, opacity: this.customStyle.tmd, color: this.customStyle.fontColor };
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
        this.titleStyle = { backgroundColor: newData.mrlb, opacity: newData.tmd };
        this.activeStyle = { color: newData.xsys, backgroundColor: newData.xzbjs };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newName, oldName) { // 值发生变化时
        if (undefined !== newName && newName !== null) {
          this.setting = JSON.parse(newName.pzx);
          this.column = this.setting.data;
          this.form.cid = newName.id;
          this.initData(newName.id);
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.query-custom {
  width: 100%;
  height: 70px;
  flex: 0 1 auto;
  padding: 10px 20%;
  box-sizing: border-box;
}
.query-item {
  width: 100%;
  min-height: 40px;
  border-bottom: 1px solid #DCDFE6;
}
.query-body {
  width: 100%;
  height: 100%;
  display: flex;
  line-height: 50px;
  flex-flow: row nowrap;
  border: 1px solid #DCDFE6;
  border-radius: 25px;
  padding: 5px 60px 5px 25px;
  box-sizing: border-box;
  position: relative;
}
.query-input, .query-input:focus {
  border: none;
  width: 100%;
  outline: none;
}
.query-button {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 60px;
  height: 50px;
  line-height: 50px;
  border-radius: 0px 25px 25px 0px;
  background-color: #4a98f6;
  text-align: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 25px;
  font-weight: bolder;
}
.query-button:hover {
  background-color: #66b1ff;
}
.article-body {
  flex: 1 1 auto;
  overflow: hidden;
  height: inherit;
}

.custom-ul-header {
  font-weight: 600;
  text-align: left;
}

.custom-ul-li, .custom-ul-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
[class*="el-col-"] {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
